<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摇一摇效果</title>
<style type="text/css">
.demo{width:320px; margin:40px auto 0 auto; }
.hand { width: 190px; height: 300px; margin:0 auto; background: url(hand.png) no-repeat; }
.hand-animate { -webkit-animation: hand_move infinite 2s; }
.result { background: #393B3C; border: #2C2C2C 1px solid; box-shadow: inset #4D4F50 0 0 0 1px; border-radius: 10px; color: #fff; padding: 10px; width: 300px; opacity: 0;
        -webkit-transition: all 1s;
           -moz-transition: all 1s;
            -ms-transition: all 1s;
             -o-transition: all 1s;
                transition: all 1s; }
.result-show { opacity: 1; margin-top: 50px; }

 @-webkit-keyframes hand_move {
        0% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
        50% {
            -webkit-transform: rotate(15deg);
               -moz-transform: rotate(15deg);
                -ms-transform: rotate(15deg);
                 -o-transform: rotate(15deg);
                    transform: rotate(15deg); }
        100% {
            -webkit-transform: rotate(0);
               -moz-transform: rotate(0);
                -ms-transform: rotate(0);
                 -o-transform: rotate(0);
                    transform: rotate(0); }
    }
</style>
<script> 
		function click(e) {
		if (document.all) {
		if (event.button==2||event.button==3) { alert("别打算抄代码！");
		oncontextmenu='return false';
		}
		}
		if (document.layers) {
		if (e.which == 3) {
		oncontextmenu='return false';
		}
		}
		}
		if (document.layers) {
		document.captureEvents(Event.MOUSEDOWN);
		}
		document.onmousedown=click;
		document.oncontextmenu = new Function("return false;")
		document.onkeydown =document.onkeyup = document.onkeypress=function(){ 
		if(window.event.keyCode == 123) { 
		window.event.returnValue=false;
		return(false); 
		} 
		}
</script>
</head>

<body>
<div id="main">
   <div class="demo">
		<div id="hand" class="hand hand-animate"></div>
		<div id="result"></div>
   </div>
</div>
<script src="shake.js"></script>
<script>
window.onload = function() {
    var myShakeEvent = new Shake({
        threshold: 15
    });

    myShakeEvent.start();

    window.addEventListener('shake', shakeEventDidOccur, false);

    function shakeEventDidOccur () {
		var result = document.getElementById("result");
		result.className = "result";
		var arr = ['妹子一枚','福利图片一套','码农笔记一本','土豪金一台'];
		var num = Math.floor(Math.random()*4);
		result.innerHTML = "恭喜，摇得"+arr[num]+"！";
		setTimeout(function(){
            result.className = "result result-show";
        }, 1000);
    }
};
</script>
</body>
</html>